<template>
    <el-row :gutter="20">
        <el-col :span="6" v-for="item in cardArr">
            <el-card class="box-card" shadow="hover">
                <template #header>
                    <div class="card-header">
                        <span style="font-size: 14px; color: #303133; font-family: '微软雅黑';">{{ item.title }}</span>
                        <el-tag class="ml-2" :type="item.unitColor">{{ item.unit }}</el-tag>
                    </div>
                </template>
                <div style="font-size: 30px;color: #6B7280;">{{ item.value }}</div>
                <el-divider />
                <div class="card-footer">
                    <span style="font-size: 14px; color: #6B7280;">{{ item.subTitle }}</span>
                    <span style="font-size: 14px; color:#6B7280 ;">{{ item.subValue }}</span>
                </div>
            </el-card>
        </el-col>
    </el-row>
    <el-row :gutter="20">
        <el-col :span="3" v-for="(item, index) in cardArr4" :key="index">
            <el-card shadow="hover">
                <el-icon size="20" class="btn">
                    <component :is="item.icon"></component>
                </el-icon>
                <p style="font-size: 14px;">{{ item.title }}</p>
            </el-card>
        </el-col>
    </el-row>
    <el-row :gutter="20">
        <!-- echarts 图表 -->
        <el-col :span="12">
            <el-card class="box-card">
                <template #header>
                    <span>订单统计</span>
                    <!-- <el-check-tag v-for="item in options" checked>{{ item.text }}</el-check-tag> -->
                </template>
                <div id="main" style="width: 600px;height:400px;"></div>
            </el-card>
        </el-col>
        <el-col :span="12">
            <div class="grid-content ep-bg-purple-light">
                <el-row>
                    <el-col :span="24">
                        <el-card class="box-card">
                            <template #header>
                                <div class="card-header">
                                    <span style="font-size: 14px;">店铺及商品提示</span>
                                    <el-button type="danger" size="small" plain>店铺及商品提示</el-button>
                                </div>
                            </template>
                            <div>
                                <!-- <el-button color="#ccc" :dark="isDark" size="large" v-for="item in cardArr2">
                                    <span>{{ item.value }}</span>
                                    <span>{{ item.label }}</span>
                                </el-button> -->
                                <el-row :gutter="15">
                                    <el-col :span="6" v-for=" item  in  cardArr2 ">
                                        <el-card shadow="hover" class="card-body">
                                            {{ item.value }}
                                            <p>{{ item.label }}</p>
                                        </el-card>
                                    </el-col>
                                </el-row>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-card class="box-card">
                            <template #header>
                                <div class="card-header">
                                    <span style="font-size: 14px;">交易提示</span>
                                    <el-button type="danger" size="small" plain>需要立即处理的交易订单</el-button>
                                </div>
                            </template>
                            <div>
                                <!-- <el-button color="#ccc" :dark="isDark" size="large" v-for="item in cardArr2">
                                    <span>{{ item.value }}</span>
                                    <span>{{ item.label }}</span>
                                </el-button> -->
                                <el-row :gutter="15">
                                    <el-col :span="6" v-for=" item  in  cardArr3 ">
                                        <el-card shadow="hover" class="card-body">
                                            {{ item.value }}
                                            <p>{{ item.label }}</p>
                                        </el-card>
                                    </el-col>
                                </el-row>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </div>
        </el-col>
    </el-row>
</template>
<script setup >
import { statisticsOneApi } from '@/api/statistics'
import { statisticsTwoApi } from '@/api/statistics'
import { statisticsThreeApi } from '@/api/statistics'
import { ref } from 'vue'
import { onMounted } from 'vue';
// 引入 echarts
import * as echarts from 'echarts';
const cardArr = ref([])
const cardArr2 = ref([])
const cardArr3 = ref([])
const cardArr4 = [
    {
        icon: "user",
        color: "text-light-blue-500",
        title: "用户",
        path: "/user/list"
    },
    {
        icon: "shopping-cart",
        color: "text-violet-500",
        title: "商品",
        path: "/goods/list"
    },
    {
        icon: "tickets",
        color: "text-fuchsia-500",
        title: "订单",
        path: "/order/list"
    },
    {
        icon: "chat-dot-square",
        color: "text-teal-500",
        title: "评价",
        path: "/comment/list"
    },
    {
        icon: "picture",
        color: "text-rose-500",
        title: "图库",
        path: "/image/list"
    },
    {
        icon: "bell",
        color: "text-green-500",
        title: "公告",
        path: "/notice/list"
    },
    {
        icon: "set-up",
        color: "text-grey-500",
        title: "配置",
        path: "/setting/base"
    },
    {
        icon: "files",
        color: "text-yellow-500",
        title: "优惠券",
        path: "/coupon/list"
    }
]
// console.log('cardArr', cardArr);
// const options = [
//     {
//         text: '近1个月',
//         value: 'month'
//     },
//     {
//         text: '近1周',
//         value: 'week'
//     },
//     {
//         text: '近24小时',
//         value: 'hour'
//     }
// ]
statisticsOneApi().then(res => {
    console.log('statistics', res);
    // console.log('abc', res.data.data.panels);
    const cardArrSon = res.data.data.panels
    cardArr.value = cardArrSon
})
statisticsTwoApi().then(res => {
    console.log('statisticsTwoApi', res);
    console.log('statisticsTwoApi1', res.data.data);
    const cardArrSon2 = res.data.data.goods
    cardArr2.value = cardArrSon2
    const cardArrSon3 = res.data.data.order
    cardArr3.value = cardArrSon3

})
onMounted(() => {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 绘制图表
    const option = {
        xAxis: {
            type: 'category',
            data: []
            // data: x.value
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: [],
                type: 'bar',
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(180, 180, 180, 0.2)'
                }
            }
        ]
    }
    statisticsThreeApi().then(res => {
        console.log('statisticsThreeApi', res);
        option.xAxis.data = res.data.data.x
        option.series[0].data = res.data.data.y
        myChart.setOption(option)
    })
})
</script>
<style scoped lang="scss">
.el-row {
    margin-bottom: 20px;
}

.el-row:last-child {
    margin-bottom: 0;
}

.el-col {
    border-radius: 4px;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* background-color: antiquewhite; */
}

.card-footer {
    display: flex;
    justify-content: space-between;
}

.card-body {
    text-align: center;
    background-color: #f8f8f8;
    font-size: 20px;

    p {
        font-size: 12px;
        color: #6B7280;
    }

}

.btn {
    @apply text-green-600
}
</style>